{extend name="public:base" /}

{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">{/block}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">名称</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="name" placeholder="请输入手机号" value="{$info.name}" disabled>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">封面图</label>
                                <div class="col-sm-3">
                                    <img src="{:getPicture($info.cover_id)}" style="height: 260px; width: auto" alt="">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">虚拟人名称</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" name="virtualman_name" placeholder="请输入虚拟人名称" value="{$info.virtualman_name}" disabled>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">已选文案</label>

                                <style>
                                    .main-box {
                                        display: flex;
                                        flex-direction: column;
                                    }

                                    .tab-box {
                                        display: flex;
                                        margin-bottom: 10px;
                                    }

                                    .tab-box .tab {
                                        font-size: 16px;
                                        font-weight: bold;
                                        padding: 10px 30px;
                                        cursor: pointer;
                                    }

                                    .tab-box .active {
                                        color: #fff;
                                        background: #1ab394;
                                    }
                                </style>

                                <div class="main-box col-sm-11">
                                    <div class="tab-box">
                                        <div class="tab active" onclick="changeTab(0)">商品文案</div>
                                        <div class="tab" onclick="changeTab(1)">互动文案</div>
                                    </div>

                                    <div class="table-responsive goods">
                                        <table class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th>文案标签</th>
                                                <th>驱动类型</th>
                                                <th>内容</th>
                                                <th>类型</th>
                                                <th>关键词</th>
                                                <th>视频生成状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {volist name="goods_copywrite_list" id="vo"}
                                            <tr>
                                                <td>{:getTagName($vo.tag_id)}</td>
                                                <td>{$vo.type == 1 ? '文本驱动' : '语音驱动'}</td>
                                                {if $vo.type == 1}
                                                <td>{$vo.content}</td>
                                                {else /}
                                                <td>
                                                    <audio controls>
                                                        <source src="{$vo.voice_url}" type="audio/mpeg">
                                                    </audio>
                                                </td>
                                                {/if}
                                                <td>{$vo.style == 1 ? '商品文案' : '商品问答'}</td>
                                                <td>{$vo.keyword}</td>
                                                <td>{$vo.video_status == 0 ? '未生成' : '已生成'}</td>
                                                <td class="project-actions">
                                                    {if $vo.video_status == 1}
                                                    <div data-toggle="modal" data-target="#myModal" onclick="lookVideo('{$vo.video_url}')" class="btn btn-white btn-sm">
                                                        <i class="iconfont icon-eye"></i> 查看视频
                                                    </div>
                                                    {/if}
                                                </td>
                                            </tr>
                                            {/volist}
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="table-responsive interact" style="display: none">
                                        <table class="table table-striped">
                                            <thead>
                                            <tr>
                                                <th>驱动类型</th>
                                                <th>内容</th>
                                                <th>类型</th>
                                                <th>关键词</th>
                                                <th>视频生成状态</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {volist name="interact_copywrite_list" id="vo"}
                                            <tr>
                                                <td>{$vo.type == 1 ? '文本驱动' : '语音驱动'}</td>
                                                {if $vo.type == 1}
                                                <td>{$vo.content}</td>
                                                {else /}
                                                <td>
                                                    <audio controls>
                                                        <source src="{$vo.voice_url}" type="audio/mpeg">
                                                    </audio>
                                                </td>
                                                {/if}
                                                <td>{$vo.style == 1 ? '商品文案' : '商品问答'}</td>
                                                <td>{$vo.keyword}</td>
                                                <td>{$vo.video_status == 0 ? '未生成' : '已生成'}</td>
                                                <td class="project-actions">
                                                    {if $vo.video_status == 1}
                                                    <div data-toggle="modal" data-target="#myModal" onclick="lookVideo('{$vo.video_url}')" class="btn btn-white btn-sm">
                                                        <i class="iconfont icon-eye"></i> 查看视频
                                                    </div>
                                                    {/if}
                                                </td>
                                            </tr>
                                            {/volist}
                                            </tbody>
                                        </table>
                                    </div>

                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <input type="hidden" name="id" value="{$info['id']}">

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <!--                                <button type="button" class="btn btn-w-m btn-primary ajax-post">提交</button>-->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated flipInY">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">查看视频</h4>
            </div>
            <div class="modal-body">
                <video controls class="video" src="" type="video/mp4"></video>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script src="__STATIC__/layui/layui.js"></script>
<script>
    function lookVideo(url) {
        $('.video').attr('src', url);
    }

    function changeTab(index) {
        $('.tab').removeClass('active');
        $('.tab').eq(index).addClass('active');
        if (index == 1) {
            $('.interact').show();
            $('.goods').hide();
        } else {
            $('.interact').hide();
            $('.goods').show();
        }
    }

</script>{/block}
